<template>
  <div class="page-btn-box drag">
    <span class="page-btn no-drag iconfont icon-page-min" @click="minWindow"></span>
    <span class="page-btn no-drag iconfont " :class="[state.isMaxed ? 'icon-page-ref' :'icon-page-max']" @click="maxWindow"></span>
    <span class="page-btn no-drag iconfont icon-page-close" @click="closeWindow"></span>
  </div>
</template>

<script>
import { remote  } from "electron";
import { close,min,max } from "../../unit/plugins";
import { reactive,onMounted} from "vue";
export default {
  name: "ActBtn",
  setup(){
    const state = reactive({
      isMaxed: false,
    });
    const closeWindow = ()=>{
      close()
    }
    const minWindow = ()=>{
      min()
    }
    const maxWindow = ()=>{
      max()
      state.isMaxed = remote.getCurrentWindow().isMaximized()
    }

    onMounted(()=>{
      remote.getCurrentWindow().on('maximize',()=>{
        console.log('maximize')
        state.isMaxed = true
      })
      remote.getCurrentWindow().on('will-resize',()=>{
        console.log('will-resize')
        state.isMaxed = false
      })
    })

    return {
      state,closeWindow,minWindow,maxWindow
    }
  }
};
</script>

<style   lang="scss" scoped>
.page-btn-box{
  position: relative;
  top: 0;
  right: 0;
  text-align: right;
  width: 100%;
  height: 28px;
  display: flex;
  justify-content: flex-end;
  .page-btn{
    width: 35px;
    height: 25px;
    text-align: center;
    line-height: 28px;
    color: #959595;
    cursor: pointer;
    &:hover{ background: #e5e5e5; }
    &.icon-page-close {
      &:hover{ background: red;color: #fedede; }
    }
  }

}
</style>
